<template>
    <div style="padding:20px;">
        <el-collapse accordion>
            <el-collapse-item v-for="(dep,index) in depart" :key="index">
                <template slot="title">
                    {{dep.name}}
                    <el-switch v-model="dep.isdisable"> </el-switch>
                </template>
                <el-table :data="group" v-for="(group,index) in groups" v-if="group.pid === dep.id" @row-click="rowshop" @row-dblclick="submit" :key="index">
                    <el-table-column prop="id" label="#"></el-table-column>
                    <el-table-column prop="name" label="小组"></el-table-column>
                    <el-table-column label="操作">
                        <template slot-scope="scope">
                            <el-switch v-model="scope.row.isdisable"> </el-switch>
                        </template>
                    </el-table-column>
                </el-table>
            </el-collapse-item>
        </el-collapse>
        <el-row style="position:absolute;bottom:5px; right:10px;">
            <el-button class="fr" icon="close" type="danger" @click="closewin" style="margin-left:10px;">取消关闭</el-button>
            <el-button class="fr" icon="upload2" type="success" @click="submit">确定选择</el-button>
        </el-row>
    </div>
</template>
<script>
import C from '@/common/common.js'

export default {
  name: 'selectDepartment',
  data () {
    return {
      depart: [],
      groups: [],
      select: {},
      allshop: []
    }
  },
  methods: {
    async getshop () {
      let data = await C.ajax('/shop/user/edituserdepartment')
      if (data) {
        this.depart = data.dep
        data.gro.forEach((res, index) => {
          res.pid = ''
          res.forEach((r) => {
            res.pid = r.pid
            this.allshop.push(r)
          })
        })
        data.dep.forEach((res) => {
          this.allshop.push(res)
        })
        this.groups = data.gro
      }
    },
    rowshop: function (row, event) {
      this.allshop.forEach((res) => {
        res.isdisable = false
      })
      row.isdisable = true
      this.select = row
    },
    submit: function () {
      var that = this
      this.allshop.forEach((res) => {
        if (res.isdisable == true) {
          that.select = res
        }
      })
      if (!this.select.id) {
        C.error('请选择分类')
        return false
      }
      C.closeBrowserWindow(this.select)
    },
    closewin () {
      C.closewin()
    }
  },
  mounted: function () {
    this.getshop()
  }
}
</script>
<style>
.el-collapse {
    height: 580px;
    overflow: auto;
}

.el-collapse-item__header {
    position: relative;
}

.el-collapse-item__header .el-switch {
    position: absolute;
    top: 25%;
    right: 8%;
}

.el-collapse-item__arrow {
    line-height: 25px;
}
</style>